@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

#magnifier {
  width: 500px;
}

.box {
  width: 450px;
  height: 600px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.box > .show {
  width: 100%;
  height: 450px;
  position: relative;
  z-index: 1000;
}

.show > .mask {
  width: 200px;
  height: 200px;
  background-color: yellow;
  opacity: 0.5;
  position: absolute;
  left: 100px;
  top: 100px;
  /* 该元素不作为事件目标 */
  pointer-events: none;
  z-index: 1000;
  display: none;
}

.list {
  flex: 1;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
  display: none;
}

.list > img {
  width: 54px;
  height: 54px;
  margin-right: 30px;
  cursor: pointer;
}

.list > img.active {
  border-color: orange;
}

.enlarge {
  width: 800px;
  height: 800px;
  overflow: hidden;
  position: absolute;
  left: 101%;
  top: 0;
  z-index: 1100;
  border: black solid 2px;
  display: none;
}

.enlarge > img {
  width: 800px;
  height: 800px;
  position: absolute;
  left: 0;
  top: 0;
}

.show img {
  width: 450px;
}

.good-area {
  overflow: hidden;
}
.good-area .contaninter #magnifier {
  float: left;
  width: 450px;
  height: 450px;
}
.good-area .contaninter .good-info {
  float: left;
}
.good-area .contaninter .good-shop {
  float: left;
}

.contaninter .layui-breadcrumb {
  font-size: 0;
}